<template>
    <view class="medicationDetail ph-64">
        <Navigation title="用药自查" background="#fff" />
        <image class="w-f" :src="detail.iconPath" mode="widthFix"></image>
        <view class="mt-56 fs-40 fw-600 text-color4"> {{ detail.medicineName }} </view>
        <view class="mt-8 fs-28 text-color3">商品名：{{ detail.medicineName }}</view>
        <view class="mt-40 fs-32 fw-600 text-color4">功能主治</view>
        <view class="mt-8 fs-28 text-color3">{{ detail.indications }}</view>
        <view class="mt-40 fs-32 fw-600 text-color4">适用宠物</view>
        <view class="mt-8 fs-28 text-color3">{{ detail.targetType == 0 ? '猫科' : '犬科' }}</view>
        <view class="mt-40 fs-32 fw-600 text-color4">用法</view>
        <view class="mt-8 fs-28 text-color3">{{ detail.useage }}</view>
        <view class="mt-40 fs-32 fw-600 text-color4">用量</view>
        <view class="mt-8 fs-28 text-color3">{{ detail.dosage }}</view>
        <view class="mt-40 fs-32 fw-600 text-color4">使用注意</view>
        <view class="mt-8 fs-28 text-color3">{{ detail.precautions }}</view>
        <view class="f jc-c mt-56 pb-56" @click='toDocotr'>
            <view class="w-506"><u-button text="用药不明白，在线问宠医" color="#FABB3C" shape="circle"></u-button></view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { medicineDetail } from '@/services/api/index/index';
const detail = ref<any>('');
onLoad((options: any) => {
    getDetail(options.id);
});
async function getDetail(id: string) {
    const { data } = await medicineDetail({ id });
    detail.value = data;
}
 function toDocotr() {
    uni.navigateTo({
    	url:'/pages_index/doctor'
    })
}
</script>
<style lang="scss" scoped>
.medicationDetail {
    ::v-deep .u-button__text {
        font-size: 28rpx !important;
        font-weight: 600 !important;
    }
    ::v-deep .u-button {
        height: 72rpx !important;
    }
}
</style>
